//------variables ------//
var columnParentBoxId = 'right';	//para  mi Id=right (la caja contenedora de todos los widgets)
var rightImage = '/media/img/widget/rightarrow.gif';
var downImage = '/media/img/widget/downarrow.gif';
var closeImage = '/media/img/widget/button_cancel.gif';
var editarImagen = '/media/img/widget/editar.gif';
var moverImagen = '/media/img/widget/move.png';
var columnParentBox;
var colorCaja = new Array();
var minColumna1 = 0;
var minColumna2 = 0;
var minColumna3 = 0;

var auxiliar = new Array();
var dataFeeds = new Array();
var contFeeds = 0;
var ind = 0;

var opera = navigator.userAgent.toLowerCase().indexOf('opera')>=0?true:false;

//------Funciones ------//
function crearColumnas(nroDeColumnas,opcionCol)
{
	columnParentBox = document.getElementById(columnParentBoxId);
	var columnWidth = new Array();
	
	switch(nroDeColumnas)
	{
		case '1':
				columnWidth[0] = 100;
				break;
		case '2':
				if(opcionCol == 1){
					columnWidth[0] = 50;
					columnWidth[1] = 50;
				}
				if(opcionCol == 2){
					columnWidth[0] = 60;
					columnWidth[1] = 40;
				}
				if(opcionCol == 3){
					columnWidth[0] = 40;
					columnWidth[1] = 60;
				}
				break;
		case '3': 
				if(opcionCol == 1){
					columnWidth[0] = 33;
					columnWidth[1] = 33;
					columnWidth[2] = 33;
				}
				if(opcionCol == 2){
					columnWidth[0] = 28;
					columnWidth[1] = 42;
					columnWidth[2] = 30;
				}
				break;
	}
	
	var sumWidth = 0;
	var ind = 0;
	
	for(var no=0;no<nroDeColumnas;no++){
		if(no==(nroDeColumnas-1))columnWidth[ind] = 99 - sumWidth;
		sumWidth = sumWidth + columnWidth[ind];
		var div = document.createElement('DIV');
		div.style.cssText = 'float:left;width:'+columnWidth[ind]+'%;padding:0px;margin:0px;';
		div.style.height='100%';
		div.style.styleFloat='left';
		div.style.width = columnWidth[ind] + '%';
		div.style.padding = '0px';
		div.style.margin = '0px';
		div.id = 'dragableBoxesColumn' + (no+1);
		columnParentBox.appendChild(div);
		
		var clearObj = document.createElement('HR');	
		clearObj.style.clear = 'both';
		clearObj.style.visibility = 'hidden';
		div.appendChild(clearObj);	
		
		ind++;
	}
	
	var clearingDiv = document.createElement('DIV');
	columnParentBox.appendChild(clearingDiv);
	clearingDiv.style.clear='both';
}

///////////////////////// Cajas Inner /////////////////////////////////
//////////////////////////// COLORES ///////////////////////////////////////////
function colorBoxModel(datacolor)
{
	    switch(datacolor)
	    {
			case 'azul'://-- AZUL --//
						colorCaja[datacolor] = new Array();
						colorCaja[datacolor]['backgroundcabecera'] = '#1E679A';
						colorCaja[datacolor]['borde'] = '#317082';
						colorCaja[datacolor]['Pieborde'] = '#317082';
						colorCaja[datacolor]['backgroundpie'] = '#BBD9EE';
						colorCaja[datacolor]['fondoinner'] = '#E9F1EA';
						break;
			case 'naranja'://-- NARANJA --//
							colorCaja[datacolor] = new Array();
							colorCaja[datacolor]['backgroundcabecera'] = '#E5820E';
							colorCaja[datacolor]['borde'] = '#A66300';
							colorCaja[datacolor]['Pieborde'] = '#A66300';
							colorCaja[datacolor]['backgroundpie'] = '#FFC773';
							colorCaja[datacolor]['fondoinner'] = '#FFEAB7';
							break;
			case 'rojo'://-- ROJO --//
						colorCaja[datacolor] = new Array();
						colorCaja[datacolor]['backgroundcabecera'] = '#BA1111';
						colorCaja[datacolor]['borde'] = '#9B001C';
						colorCaja[datacolor]['Pieborde'] = '#9B001C';
						colorCaja[datacolor]['backgroundpie'] = '#F76F87';
						colorCaja[datacolor]['fondoinner'] = '#FFEAEA';
						break;
			case 'rosa'://-- ROSA --//
						colorCaja[datacolor] = new Array();
						colorCaja[datacolor]['backgroundcabecera'] = '#CE398D';
						colorCaja[datacolor]['borde'] = '#860049';
						colorCaja[datacolor]['Pieborde'] = '#860049';
						colorCaja[datacolor]['backgroundpie'] = '#E768AD';
						colorCaja[datacolor]['fondoinner'] = '#FFE3FF';
						break;
			case 'lila'://-- LILA --//
						colorCaja[datacolor] = new Array();
						colorCaja[datacolor]['backgroundcabecera'] = '#8106A9';
						colorCaja[datacolor]['borde'] = '#60016D';
						colorCaja[datacolor]['Pieborde'] = '#60016D';
						colorCaja[datacolor]['backgroundpie'] = '#B964D4';
						colorCaja[datacolor]['fondoinner'] = '#EFCDF8';
						break;
			case 'verde'://-- VERDE --//
						colorCaja[datacolor] = new Array();
						colorCaja[datacolor]['backgroundcabecera'] = '#0D8E24';
						colorCaja[datacolor]['borde'] = '#007B25';
						colorCaja[datacolor]['Pieborde'] = '#007B25';
						colorCaja[datacolor]['backgroundpie'] = '#64DE89';
						colorCaja[datacolor]['fondoinner'] = '#E7FFDF';
						break;
		}
			
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//mouse sobre el encabezado de la caja
function mouseoverBoxHeader()
{
	if(dragDropCounter==10)return;
	var id = this.id.replace(/[^0-9]/g,'');
	document.getElementById('minymaxCaja' + id).style.visibility = 'visible';		
	if(share_estado==1) document.getElementById('compartirCajaWidgetLink' + id).style.visibility = 'visible';		
	//document.getElementById('cerrarCajaWidgetLink' + id).style.visibility = 'visible';
	document.getElementById('editarCajaWidget' + id).style.visibility = 'visible';
	
}

//mouse fuera del encabezado de la caja
function mouseoutBoxHeader(e,obj)
{
	if(!obj)obj=this;
	
	var id = obj.id.replace(/[^0-9]/g,'');
	document.getElementById('minymaxCaja' + id).style.visibility = 'hidden';		
	document.getElementById('compartirCajaWidgetLink' + id).style.visibility = 'hidden';		
	//document.getElementById('cerrarCajaWidgetLink' + id).style.visibility = 'hidden';	
	document.getElementById('editarCajaWidget' + id).style.visibility = 'hidden';		
	
}

//min - max contenido de caja widget
function mostrarContenidoDeCaja(e,inputObj)
{
	if(document.all)e = event;
	if(!inputObj)inputObj=this;
	
	var nroId = inputObj.id.replace(/[^0-9]/g,'');
	var obj = document.getElementById('contenidoCaja' + nroId);
	if(cajaArray[boxIndex]['estado']==1){
		obj.style.display = inputObj.src.indexOf(downImage)>=0?'none':'block';
		inputObj.src = inputObj.src.indexOf(downImage)>=0?rightImage:downImage;
		inputObj.title = inputObj.src.indexOf(downImage)>=0?'Ocultar':'Mostrar';
	}else{
		obj.style.display = inputObj.src.indexOf(rightImage)>=0?'block':'none';
		inputObj.src = inputObj.src.indexOf(rightImage)>=0?downImage:rightImage;
		inputObj.title = inputObj.src.indexOf(rightImage)>=0?'Mostrar':'Ocultar';
	}
	cajaArray[nroId]['expandido'] = obj.style.display=='block'?1:0;
	var dir = '/estadowidget/?numerocaja='+ nroId +'&estado='+cajaArray[nroId]['expandido'];	
	document.getElementById('editCaja' + auxiliar[nroId]['cajaIndex']).style.display = 'none';
	
	obtenerDatosAjax(dir);
	
	
	setTimeout('dragDropCounter=-5',5);
}


function editarCajaWidget()
{	
	var idObj = this.id.replace(/[^0-9]/g,'');
	var objactual = document.getElementById('editCaja' + idObj);
	
	if(objactual.style.display=='none')
	{
		for(var no=1;no<auxiliar.length;no++){
			if(auxiliar[no]['cajaIndex'] !=idObj){
			    	document.getElementById('editCaja' + auxiliar[no]['cajaIndex']).style.display = 'none';
			}
		}		
		objactual.style.display = 'block';
	}else{
		objactual.style.display = 'none';
	}
	
	setTimeout('dragDropCounter=-5',5);
}

//mouse sobre el boton compartir
function mouseover_Button()
{
	this.className = 'Button_over';	
	setTimeout('dragDropCounter=-5',5);
}

//mouse sobre el boton cerrar y min-max
function mouseover_ButtonImg()
{
	this.className = 'button_overImg';	
	setTimeout('dragDropCounter=-5',5);
}

//mouse fuera del botton
function mouseout_Button()
{
	this.className = 'Button';	
}

//mouse fuera del botton cerrar y min-max
function mouseout_ButtonImg()
{
	this.className = 'buttonImg';	
}


//cierrar la caja widget
function compartirWidget(e,inputObj)
{
	var alerta='sólo puede introducir números'; 
	
	if(!inputObj)inputObj = this;

	var posx = 0;
    var posy = 0;

	if (e.pageX || e.pageY)
    {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
        posx = e.clientX;
        posy = e.clientY;
    }


	var nroId = inputObj.id.replace(/[^0-9]/g,'');
	compartir(cajaArray[nroId]['name'],posy);
	setTimeout('dragDropCounter=-5',5);
	
	
	
}

//cierrar la caja widget
function cerrarCajaWidget(e,inputObj)
{
	
	if(!inputObj)inputObj = this;

	var posx = 0;
    var posy = 0;

	if (e.pageX || e.pageY)
    {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
        posx = e.clientX;
        posy = e.clientY;
    }

	var nroId = inputObj.id.replace(/[^0-9]/g,'');
//	document.getElementById('editCaja' + auxiliar[nroId]['cajaIndex']).style.display = 'none';
	cerrarbox(cajaArray[nroId]['name'],nroId,posy);
	setTimeout('dragDropCounter=-5',5);
}

function crearCajaEdit(parentObj,idwidbox)
{
	var editdiv = document.createElement('LI');
	editdiv.id = 'editCaja' + boxIndex;
	editdiv.style.display='none';
	editdiv.className = 'editCajaPosicion';
	
	var contenido = '<li class="editCaja"><center><form action="/editarcolorcaja/" method="GET" id="colorcaja">'
	+'<table><tr><td style="width:500px"><div style="text-align: center; color: #036DA7; text-shadow: 0 3px 3px #FFF; font-family: serif; padding:2px; background-image:url(/media/img/widget/fondo2.png); border: 1px solid rgb(51, 51, 51); -moz-border-radius: 4px; -webkit-border-radius: 4px;"><img src="/media/img/gif/palette.png"></img> Color: </div></td></tr></table>'
	+'<center><table><tr><input id="editaridbox1" type="hidden" value="' + boxIndex + '" name="idcaja1" />'
	+'<td style="margin-left: 50%"><div class="formstyle"><input id="colorcaja2" name="colorcaja" value="naranja" type="image" src="/media/img/widget/Naranja.jpg"> '
	+'<input id="colorcaja3" name="colorcaja" value="rojo" type="image" src="/media/img/widget/Rojo.jpg"> '
	+'<input id="colorcaja4" name="colorcaja" value="rosa" type="image" src="/media/img/widget/Rosa.jpg"> '
	+'<input id="colorcaja5" name="colorcaja" value="lila" type="image" src="/media/img/widget/Lila.jpg"> '
	+'<input id="colorcaja6" name="colorcaja" value="azul" type="image" src="/media/img/widget/Azul.jpg"> '
	+'<input id="colorcaja7" name="colorcaja" value="verde" type="image" src="/media/img/widget/Verde.jpg"></td></tr></table></center></form></center></li>'
	+'<li class="editCaja"><center><form action="/editaralturacaja/" method="GET" id="alturacaja">'
	+'<input id="editaridbox2" type="hidden" value="' + boxIndex + '" name="idcaja2" />'
	+'<table><tr><td style="width:1000px"><div style="text-align: center; color: #036DA7; text-shadow: 0 3px 3px #FFF; font-family: serif; padding:3px; background-image:url(/media/img/widget/fondo2.png); border: 1px solid rgb(51, 51, 51); -moz-border-radius: 4px; -webkit-border-radius: 4px;">Tama&ntilde;o: </div></td></tr></table>'
	+'<center><table><tr><td><input id="nro" name="altura" value="120" type="text" size="4" maxlength="3" onKeypress="return acceptNumEnt(event)" style="text-align: center"></td>'
	+'<td><input id="save" name="guardar" value="Guardar" type="submit" class="formstyle"></td></tr></table></center></form></center><li>';

	editdiv.innerHTML = contenido;
	
	parentObj.appendChild(editdiv);	

}

function agregarEncabezadoCajaWidget(parentObj,nombreWidget,uniqueIdentifier,datacolor)
{
	var div = document.createElement('DIV');
	div.className = 'cabeceraDeCajaWidget';
	div.id = 'cabeceraDeCajaWidget' + boxIndex;
	div.onmouseover = mouseoverBoxHeader;
	div.onmouseout = mouseoutBoxHeader;
	div.onmousedown = initDragDropBox;
	div.style.cursor = 'url(/media/img/gif/Move.cur), auto';
	div.style.backgroundColor = colorCaja[datacolor]['backgroundcabecera']; 
	
	var image = document.createElement('IMG');
	image.id = 'minymaxCaja' + boxIndex;
	if(cajaArray[boxIndex]['estado']==1){
		image.src = downImage;
		image.title = 'Ocultar';
	}
	else{
		image.src = rightImage;
		image.title = 'Mostrar';
	}
    image.className = 'buttonImg';
	image.style.visibility = 'hidden';
    image.onmouseover = mouseover_ButtonImg;
	image.onmouseout = mouseout_ButtonImg;	
	image.style.cursor = 'pointer';
	image.onmousedown = mostrarContenidoDeCaja;	
	div.appendChild(image);

	var textSpan = document.createElement('SPAN');
	textSpan.id = 'cabeceraDeCajaWidget_txt' + boxIndex;
	textSpan.innerHTML = nombreWidget;
	div.appendChild(textSpan);
			
	parentObj.appendChild(div);	

	var closeLink = document.createElement('IMG');
	closeLink.style.cssText = 'float:right';
	closeLink.style.styleFloat = 'right';
	closeLink.id = 'cerrarCajaWidgetLink' + boxIndex;
	closeLink.src = closeImage;
	closeLink.title = 'Cerrar';
	closeLink.className = 'buttonImg';
	closeLink.onmouseover = mouseover_ButtonImg;
	closeLink.onmouseout = mouseout_ButtonImg;
	closeLink.style.cursor = 'pointer';
	closeLink.style.visibility = 'visible';
	closeLink.onmousedown = cerrarCajaWidget;
	div.appendChild(closeLink);

	var editLink = document.createElement('IMG');
	editLink.style.cssText = 'float:right';
	editLink.style.styleFloat = 'right';
	editLink.id = 'editarCajaWidget' + boxIndex;
	editLink.src = editarImagen;
	editLink.title = 'Opciones';
	editLink.className = 'buttonImg';
	editLink.onmouseover = mouseover_ButtonImg;
	editLink.onmouseout = mouseout_ButtonImg;
	editLink.style.cursor = 'pointer';
	editLink.style.visibility = 'hidden';
	editLink.onmousedown = editarCajaWidget;
	div.appendChild(editLink);

	var shareLink = document.createElement('A');
	shareLink.id = 'compartirCajaWidgetLink' + boxIndex;
    shareLink.innerHTML = 'Compartir';
	shareLink.style.cssText = 'float:right';
	shareLink.style.styleFloat = 'right';
	shareLink.style.visibility = 'hidden';
    shareLink.className = 'Button';
	shareLink.onmouseover = mouseover_Button;
	shareLink.onmouseout = mouseout_Button;
	shareLink.onmousedown = compartirWidget;
	shareLink.style.cursor = 'pointer';
	div.appendChild(shareLink);

}

function agregarContenidoDeCajaWidget(parentObj,widgetUrl,heightOfBox)
{
    var temp = widgetUrl.split(".");
	if(heightOfBox<120)heightOfBox=120; 
 
	var estado = cajaArray[boxIndex]['estado'];
	var div = document.createElement('DIV');
	div.className = 'contenidoCaja';
	
	var elementos = temp.length;
	elementos = elementos - 1;
	var tipoArchivo = temp[elementos];
	
	if(opera)div.style.clear='none';
	div.id = 'contenidoCaja' + boxIndex;
	if(tipoArchivo != 'xml')
	{	
		div.innerHTML = '<embed id="wid" style="" src="' + widgetUrl + '" type="application/x-shockwave-flash" height="' + heightOfBox + '" width="100%" align="center" wmode="opaque"><param name="wmode" value="opaque"></embed>';
	}else{
		dataFeeds[contFeeds]=new Array();
		dataFeeds[contFeeds]['url'] = widgetUrl;
		dataFeeds[contFeeds]['div'] = div.id;
		contFeeds++;
		div.className='scrolldiv';
		div.innerHTML='<center><IMG SRC="/media/img/loading.gif">'+' Loading...'+'</IMG></center>';
	}
	parentObj.appendChild(div);			
	if(heightOfBox && heightOfBox/1>40){
		div.style.height = heightOfBox + 'px';		
		div.setAttribute('heightOfBox',heightOfBox);
		div.heightOfBox = heightOfBox;	
		if(document.all)div.style.overflowY = 'auto';else div.style.overflow='-moz-scrollbars-vertical;';
		if(opera)div.style.overflow='auto';
	}		
	if(estado==0)div.style.display = 'none';
	else div.style.display = 'block';
}

function agregarPieDeCajaWidget(parentObj,datacolor)
{
	var div = document.createElement('DIV');
	div.className = 'PieDeCajaWidget';
	div.id = 'PieDeCajaWidget' + boxIndex;
	div.style.backgroundColor = colorCaja[datacolor]['backgroundpie'] ;
	div.style.borderTop = '5px double ' + colorCaja[datacolor]['Pieborde'];
	parentObj.appendChild(div);	
}

function crearCajaWidget(columnIndex,heightOfBox,widgetUrl,nombreWidget,uniqueIdentifier,cajaIndex,datacolor,expandido)
{
	boxIndex=cajaIndex;
	ind++;
	colorBoxModel(datacolor);
	var maindiv = document.createElement('DIV');
	maindiv.className = 'dragableBox';
	maindiv.style.backgroundColor = colorCaja[datacolor]['fondoinner'];
	maindiv.id = 'dragableBox' + cajaIndex;
	
	var div = document.createElement('DIV');
	div.className='dragableBoxInner';
	div.style.border = '1px solid '+ colorCaja[datacolor]['borde'];
	maindiv.appendChild(div);
	
	cajaArray[cajaIndex] = new Array();
	cajaArray[cajaIndex]['idwid'] = uniqueIdentifier;
	cajaArray[cajaIndex]['index'] = cajaIndex;
	cajaArray[cajaIndex]['name'] = nombreWidget;
	cajaArray[cajaIndex]['columna'] = columnIndex;
	cajaArray[cajaIndex]['estado'] = expandido;
	auxiliar [ind]= new Array();
	auxiliar [ind]['cajaIndex']= cajaIndex;
	
	agregarEncabezadoCajaWidget(div,nombreWidget,uniqueIdentifier,datacolor);
	crearCajaEdit(div,uniqueIdentifier);
	agregarContenidoDeCajaWidget(div,widgetUrl,heightOfBox);
	agregarPieDeCajaWidget(div,datacolor);
	
	var obj = document.getElementById('dragableBoxesColumn' + columnIndex);		
	var subs = obj.getElementsByTagName('DIV');
	if(subs.length>0){
		obj.insertBefore(maindiv,subs[0]);
	}else{
		obj.appendChild(maindiv);
	}
	
	dragableBoxesArray[cajaIndex] = new Array();
	dragableBoxesArray[cajaIndex]['obj'] = maindiv;
	dragableBoxesArray[cajaIndex]['parentObj'] = maindiv.parentNode;
	dragableBoxesArray[cajaIndex]['uniqueIdentifier'] = uniqueIdentifier;
	dragableBoxesArray[cajaIndex]['heightOfBox'] = heightOfBox;
}
